<template>
    <div>
        <!-- 移动端 -->
        <div class="bottom_mobile" v-if="ismobile">
            <div class="b-top">
                <img class="m_logo" src="../../assets/images/zi-yuan-3-566.png" loading="lazy">

                <div class="b_centers">
                    <div>方案咨询</div>
                    <div>
                        <div>
                            <img src="../../assets/images/wx20231124-212821-278.jpg" loading="lazy" />
                            <p>防伪系统咨询</p>
                        </div>
                        <div>
                            <img src="../../assets/images/wx20231124-212952-278.jpg" loading="lazy" />
                            <p>防伪系统购买</p>
                        </div>
                    </div>
                </div>
                <div class="b_lefts">
                    <p class="t1">免费咨询热线</p>
                    <p class="t2">+86 151-1226-7883</p>
                </div>
                <div class="b_rights">
                    <div>联系方式</div>
                </div>
                <div class="m1">地址：东莞市常平镇常黄路紫荆花园丰雅阁A座G09</div>
                <div class="m2">邮箱：15112267883@163.com</div>
            </div>
            <div class="b_bottom">
                <div>© Copyright 东莞邀星科技有限公司</div>
            </div>
        </div>
        <!-- pc端 -->
        <div class="bottom_pc ispc" v-if="!ismobile">
            <div class="allwidth">
                <div class="b-top">
                    <div class="b_lefts">
                        <img src="../../assets/images/zi-yuan-3-566.png" loading="lazy">
                        <p class="t1">免费咨询热线</p>
                        <p class="t2">+86 151-1226-7883</p>
                    </div>
                    <div class="b_centers">
                        <div>方案咨询</div>
                        <div>
                            <div>
                                <img src="../../assets/images/wx20231124-212821-278.jpg" loading="lazy" />
                                <p>防伪系统咨询</p>
                            </div>
                            <div>
                                <img src="../../assets/images/wx20231124-212952-278.jpg" loading="lazy" />
                                <p>防伪系统购买</p>
                            </div>
                        </div>
                    </div>
                    <div class="b_rights">
                        <div>联系方式</div>
                        <div class="w1">地址：东莞市常平镇常黄路紫荆花园丰雅阁A座G09</div>
                        <div class="w2">邮箱：15112267883@163.com</div>
                    </div>
                </div>
                <div class="b_bottom">
                    <div>© Copyright 东莞邀星科技有限公司版权所有 <img class="imgs"
                            src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png" />
                        <a href="https://beian.mps.gov.cn/#/query/webSearch" style="color: white"> 粤公网安备44190002007937号 </a>
                        <a href="https://beian.mit.gov.cn" style="color: white;margin-left: 80px;"> 粤ICP备2024248391号 </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'headers',
    data() {
        return {
            ismobile: false,
        }
    },
    mounted() {
        this.ismobile = this.isMobile()
        let that = this;
        window.addEventListener('resize', function () {
            that.ismobile = that.isMobile()
        });
    },
    methods: {

    },
}
</script>
<style lang="scss" scoped>
.imgs {
    width: 23px;
    transform: translateY(5px);
    margin-left: 82px;
}

.allwidth {
    width: 1300px;
    margin: 0 auto
}

.m_logo {
    width: 8rem;
    margin-bottom: 1rem;
}

.bottom_mobile,
.bottom_pc {
    color: white;
    width: 100%;
    background-color: #404040;
    padding: 65px 0;
    padding-bottom: 0;
}

// .bottom_pc {
.b-top {
    display: flex;
    padding: 0 3%;
    box-sizing: border-box;

    >div {
        flex: 1;
        padding: 0 3%;
        box-sizing: border-box;
        border-right: solid 1px white;
    }

    >.b_lefts {
        >img {
            width: 47%;
            display: block;
            margin-top: 20px;
        }

        .t1 {
            font-size: 20px;
            margin-top: 30px;
        }

        .t2 {
            font-size: 30px;
            margin-top: 30px;
        }
    }

    .b_centers {
        overflow: hidden;

        >div:nth-child(1) {
            font-size: 20px;
            position: relative;
            height: 38px;
            margin-top: 20px;
            margin-bottom: 22px;
        }

        >div:nth-child(1)::after {
            position: absolute;
            content: "";
            background: white;
            width: 47px;
            height: 5px;
            bottom: 0px;
            left: 0;
        }

        >div:nth-child(2) {

            >div {
                width: 45%;
                float: left;

                >img {
                    border-radius: 5px;
                    width: 100%;
                    display: block;
                }

                p {
                    text-align: center;
                    margin-top: 8px;
                }
            }

            >div:nth-child(2) {
                float: right;
            }
        }
    }

    .b_rights {
        border-right: none;

        >div:nth-child(1) {
            font-size: 20px;
            position: relative;
            height: 38px;
            margin-top: 20px;
            margin-bottom: 22px;
        }

        >div:nth-child(1)::after {
            position: absolute;
            content: "";
            background: white;
            width: 47px;
            height: 5px;
            bottom: 0px;
            left: 0;
        }

        .w1 {
            font-size: 20px;
            margin-top: 40px;
        }

        .w2 {
            font-size: 20px;
            margin-top: 30px;
        }
    }
}

.b_bottom {
    // padding: 0 3%;

    >div {
        border-top: solid 1px white;
        text-align: left;
        font-size: 19px;
        width: 90%;
        margin: 0 auto;
        line-height: 75px;
    }
}

// }
.bottom_mobile {
    padding: 2rem 1rem;
    padding-bottom: 0px;

    .b-top {
        display: block;

        .b_centers {
            >div:nth-child(1) {
                font-size: 1rem;
                height: 2rem;
                margin-top: 0rem;
                margin-bottom: 0.7rem;
            }

            >div:nth-child(1)::after {
                width: 2rem;
            }

            p {
                font-size: 1rem;
                margin-top: 0.5rem !important;
            }
        }

        .dianhua {
            font-size: 1rem;
            margin-top: 1rem !important;
        }

        .b_rights {
            margin-top: 1rem;

            >div:nth-child(1) {
                font-size: 1rem;
                height: 2rem;
            }

            >div:nth-child(1)::after {
                width: 2rem;
            }
        }
    }

    * {
        border: none !important;
    }

    .t1 {
        margin-top: 0.3rem !important;
        font-size: 1rem !important;
        margin-bottom: 0.5rem;
    }

    .t2 {
        margin-top: 0.3rem !important;
        font-size: 1.2rem !important;
        font-family: "Montserrat 3";
    }

    .w1 {
        font-size: 0.4rem !important;
        line-height: 4.3rem;
    }

    .w2 {
        font-size: 1rem !important;
        line-height: 4.3rem;
    }

    .b_bottom {
        border-top: solid 1px white !important;
        margin-top: 2rem;

        div {
            line-height: 3rem;
            font-size: 0.8rem !important;

        }
    }
}

.m1 {
    font-size: 0.8rem;
}

.m2 {
    font-size: 0.8rem;
    margin-top: 0.4rem;
}
</style>